<template>
	<view class="myAsset">
		<u-navbar
			back-text="我的资产"
			back-icon-color="#ffffff"
			:back-text-style="{
				color: '#ffffff'
			}"
			:border-bottom="false"
			:background="{
				background: '#F95D4E'
			}"
		></u-navbar>
		<view class="">
			<u-tabs :list="list" bg-color="#F95D4E" :is-scroll="false" :current="current" active-color="#ffffff" inactive-color="#ffffff" @change="change"></u-tabs>
		</view>
		<view class="main">
			<view class="" v-if="current === 0">
				<view class="recordlist">
					<view class=" u-flex u-row-between u-col-center" style="padding: 26rpx;">
						<view class="date">
							<view class="u-flex u-row-left u-col-center" @click="calendarshow = true">
								<text class="u-p-r-10">{{ balance.time }}</text>
								<u-icon name="arrow-down-fill" color="#000000" size="28"></u-icon>
							</view>
							<view class="">
								累计 ￥
								<text class="u-p-r-10">{{ balance.change_price }}</text>
								当前 ￥
								<text>{{ balance.price }}</text>
							</view>
						</view>
						<view class="tixian" @click="gotiixan">
							<text class="u-p-r-10">提现</text>
							<u-icon name="arrow-right" color="#ffffff" :size="36"></u-icon>
						</view>
					</view>
					<view class="" v-if="balance.balanceList.length > 0">
						<view class="recordul">
							<view class="recordli" v-for="(v, k) in balance.balanceList" :key="k">
								<view class="right u-flex u-row-left u-col-center">
									<view
										class="iconfont icon-qiandai"
										:style="{
											fontSize: '60rpx',
											marginRight: '26rpx',
											color: v.type === 1 ? '#F2682C' : '#8A8A8A'
										}"
									></view>
									<view class="u-flex-1">
										<view class="u-flex u-row-between u-col-center">
											<text class="title">{{ v.type === 1 ? '结算收入' : '申请提现' }}</text>
											<text
												class="title bold"
												:style="{
													color: v.type === 1 ? '#F2682C' : '#8A8A8A'
												}"
											>
												{{ v.type === 1 ? '+' + v.change_price : '-' + v.change_price }}
											</text>
										</view>
										<view class="u-flex u-row-between u-col-center">
											<text class="tips">{{ v.change_time }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore :status="loadstatus" :margin-top="20" />
					</view>
					<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center">
						<view class="" style="text-align: center;">
							<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
							<view class="" style="color: #919191;">竟无余额记录</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="current === 1">
				<view class="recordlist">
					<view class=" u-flex u-row-between u-col-center" style="padding: 26rpx;">
						<view class="date">
							<view class="u-flex u-row-left u-col-center" @click="calendarshow = true">
								<text class="u-p-r-10">{{ estimate.time }}</text>
								<u-icon name="arrow-down-fill" color="#000000" size="28"></u-icon>
							</view>
							<view class="">
								累计 ￥
								<text>{{ estimate.sum }}</text>
							</view>
						</view>
					</view>
					<view class="" v-if="estimate.estimateList.length > 0">
						<view class="recordul">
							<view class="recordli" v-for="(v, k) in estimate.estimateList" :key="k">
								<view class="right u-flex u-row-left u-col-center">
									<view
										class="iconfont icon-qiandai"
										:style="{
											fontSize: '60rpx',
											marginRight: '26rpx',
											color: '#F2682C'
										}"
									></view>
									<view class="u-flex-1">
										<view class="u-flex u-row-between u-col-center">
											<view class="title">
												<view class="">{{ v.time }}</view>
												<view class="tips" style="color: #919191;">预估收入</view>
											</view>
											<view
												class="title bold"
												:style="{
													color: '#F2682C'
												}"
											>
												{{ '+' + v.estimate_fee }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore :status="loadstatus" :margin-top="20" />
					</view>
					<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center">
						<view class="" style="text-align: center;">
							<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
							<view class="" style="color: #919191;">竟无预估记录</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="current === 2">
				<view class="recordlist">
					<view class=" u-flex u-row-between u-col-center" style="padding: 26rpx;">
						<view class="date">
							<view class="u-flex u-row-left u-col-center" @click="calendarshow = true">
								<text class="u-p-r-10">{{ settlement.time }}</text>
								<u-icon name="arrow-down-fill" color="#000000" size="28"></u-icon>
							</view>
							<view class="">
								累计 ￥
								<text class="u-p-r-10">{{ settlement.sum }}</text>
							</view>
						</view>
					</view>
					<view class="" v-if="settlement.settlementList.length > 0">
						<view class="recordul">
							<view class="recordli" v-for="(v, k) in settlement.settlementList" :key="k">
								<view class="right u-flex u-row-left u-col-center">
									<view
										class="iconfont icon-qiandai"
										:style="{
											fontSize: '60rpx',
											marginRight: '26rpx',
											color: '#F2682C'
										}"
									></view>
									<view class="u-flex-1">
										<view class="u-flex u-row-between u-col-center">
											<view class="title">
												<view class="">{{ v.time }}</view>
												<view class="tips" style="color: #919191;">结算佣金</view>
											</view>
											<view
												class="title bold"
												:style="{
													color: '#F2682C'
												}"
											>
												{{ '+' + v.recommend_actual_fee }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore :status="loadstatus" :margin-top="20" />
					</view>
					<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center">
						<view class="" style="text-align: center;">
							<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
							<view class="" style="color: #919191;">竟无预估记录</view>
						</view>
					</view>
				</view>
			</view>
			<view class="detailsbox" v-if="current === 3">
				<view class="details" v-if="!isscreen">
					<view class="title">订单状态</view>
					<view class="statusbox u-flex u-row-between u-col-center">
						<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index, item.id)" v-for="(item, index) in statuslist" :key="index">
							{{ item.name }}
						</view>
					</view>
					<u-line color="#D9D9D9"></u-line>
					<view class="title">筛选时间</view>
					<view class="timer u-flex u-row-between u-col-center">
						<view class="start" @click="opentime(1)">
							<u-icon name="calendar" color="#BBBBBB" size="28"></u-icon>
							<text
								class="u-p-l-10"
								:style="{
									color: startTime === '开始日期' ? 'rgba(187, 187, 187, 0.89)' : '#101010'
								}"
							>
								{{ startTime }}
							</text>
						</view>
						<text>至</text>
						<view class="start" @click="opentime(2)">
							<u-icon name="calendar" color="#BBBBBB" size="28"></u-icon>
							<text
								class="u-p-l-10"
								:style="{
									color: endTime === '结束日期' ? 'rgba(187, 187, 187, 0.89)' : '#101010'
								}"
							>
								{{ endTime }}
							</text>
						</view>
						<u-picker mode="time" v-model="timeshow" :params="params" :safe-area-inset-bottom="true" @confirm="dosuretime"></u-picker>
					</view>
					<u-line color="#D9D9D9"></u-line>
					<view class="title">订单编号</view>
					<view class="search">
						<u-input
							v-model="order_id"
							type="text"
							:border="true"
							placeholder="可输入订单编号进行查询"
							:custom-style="{
								borderRadius: '6rpx'
							}"
						/>
					</view>
					<view class="btns u-flex u-row-center u-col-center">
						<u-button
							type="error"
							:custom-style="{
								width: '200rpx',
								height: '60rpx',
								lineHeight: '60rpx'
							}"
							@click="getOrderDetail"
						>
							确认筛选
						</u-button>
					</view>
				</view>
				<view class="" v-else>
					<view class="screentop">
						<view class="time">
							{{ startTime === '开始日期' ? $u.timeFormat(new Date(new Date().getFullYear(), new Date().getMonth(), 1), 'mm-dd') : startTime }} 至
							{{ endTime === '结束日期' ? $u.timeFormat(new Date().valueOf(), 'mm-dd') : endTime }} 所有订单
						</view>
						<view class="info">
							累计订单数 {{ ownestimate.count }} 预估佣金 ￥{{ ownestimate.own_estimate_commission }} 结算佣金 ￥{{ ownestimate.own_actual_commission }}
						</view>
					</view>
					<view class="orderul" v-if="orderList.length > 0">
						<view class="" v-for="(v, k) in orderList" :key="k">
							<view class="orderli">
								<view class="top u-flex u-row-between u-col-center" style="padding:8rpx 12rpx;">
									<view class="">
										<text>订单号：{{ v.orderId }}</text>
										<text class="copy" @click="docopy(v.orderId)">复制</text>
									</view>
									<view class="u-row-around">
										<text class="time" v-if="v.validCode === '17'">{{ v.orderTime }}</text>
										<text
											class="u-p-l-10"
											:style="{
												color: v.validCode === '15' ? '#FFA39E' : v.validCode === '16' ? '#5A5A5A' : v.validCode === '17' ? '#52C41A' : '#D9D9D9'
											}"
										>
											{{ v.validCode === '15' ? '待付款' : v.validCode === '16' ? '已付款' : v.validCode === '17' ? '已结算' : '已失效' }}
										</text>
									</view>
								</view>
								<u-line color="#E9E9E9"></u-line>
								<view class="center u-flex u-row-between u-col-center">
									<image :src="v.imageUrl" mode="" style="width: 220rpx;height: 220rpx;margin-right: 20rpx;"></image>
									<view class="rightinfo">
										<view class="goodsname u-flex u-row-between u-col-center">
											<view class="jdicon">JD</view>
											<view class="u-line-1 u-flex-1" style="color: #101010;">{{ v.skuName }}</view>
											<view class="" style="color: #919191;">￥ {{ v.price }}</view>
										</view>
										<view class="tuier u-flex u-row-between u-col-center">
											<view class="leftbox u-line-1">推广用户：{{ v.user }}</view>
											<view class="num">X {{ v.skuNum }}</view>
										</view>
										<view class="timeprice u-flex u-row-between u-col-center">
											<view style="color: #919191;">{{ v.paytime }}</view>
											<view style="color: #5A5A5A;">
												支付
												<tetx style="color: #404040;">￥ {{ v.price }}</tetx>
											</view>
										</view>
										<u-line color="#E9E9E9"></u-line>
										<view class="commission u-flex u-row-between u-col-center">
											<view class="" style="color: #5A5A5A;">
												预估佣金
												<text
													:style="{
														color: v.validCode === '16' || v.validCode === '17' ? '#F5222D' : '#BFBFBF',
														paddingLeft: '6rpx'
													}"
												>
													{{
														v.validCode === '16' || v.validCode === '17' ? '￥' + v.own_estimate_commission : v.validCode === '15' ? '待支付' : '已失效'
													}}
												</text>
											</view>
											<view class="">
												结算佣金
												<text
													:style="{
														color: v.validCode === '17' ? '#52C41A' : '#BFBFBF',
														paddingLeft: '6rpx'
													}"
												>
													{{ v.validCode === '15' || v.validCode === '16' ? '待结算' : v.validCode === '17' ? '￥' + v.own_actual_commission : '已失效' }}
												</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center">
						<view class="" style="text-align: center;">
							<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
							<view class="" style="color: #919191;">竟无预估记录</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-calendar v-model="calendarshow" mode="range" @change="calendarchange"></u-calendar>
		<u-toast ref="uToast"></u-toast>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script>
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
export default {
	name: 'myAsset',
	data() {
		return {
			scrollTop: 0,
			firsttime: '',
			calendarshow: false,
			isscreen: false,
			startTime: '开始日期',
			endTime: '结束日期',
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			timeshow: false,
			statuslist: [
				{
					name: '所有订单',
					id: -1,
					active: true
				},
				{
					name: '已付款',
					id: 1,
					active: false
				},
				{
					name: '已结算',
					id: 2,
					active: false
				},
				{
					name: '已失效',
					id: 3,
					active: false
				}
			],
			orderstatus: '所有订单',
			loadstatus: 'loadmore',
			list: [
				{
					name: '余额记录'
				},
				{
					name: '预估记录'
				},
				{
					name: '结算记录'
				},
				{
					name: '订单详情'
				}
			],
			current: 0,
			page: 1,
			orderList: [],
			start: '',
			end: '',
			page: 1,
			status: -1,
			order_id: '',
			balance: {
				change_price: 0, //时间段内金额
				price: 0, //余额
				time: '本月',
				balanceList: [
					// {
					// 	id: 25,
					// 	type: 2, //交易类型（1收入（结算），2支出（提现））
					// 	change_time: '今天 11:50', // 时间
					// 	change_price: '10.00' //金额
					// }
				]
			},
			estimate: {
				sum: 0,
				time: '本月',
				estimateList: [
					// {
					// 	estimate_fee: "166.6448",
					// 	time: "2021-01-12"
					// }
				]
			},
			settlement: {
				sum: 0,
				time: '本月',
				settlementList: [
					// {
					// 	time: '2021-01-11', // 日期
					// 	recommend_actual_fee: '0' //结算佣金
					// }
				]
			},
			ownestimate: {
				count: 0, //时间段内订单数，
				own_estimate_commission: 0, //预估佣金，
				own_actual_commission: 0 //结算佣金，
			},
			isstart: true,
			nnum: 1
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		console.log('option', option.num);
		if (option.num) {
			this.current = parseInt(option.num);
		} else {
			this.getUserPrice();
		}
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	onPageScroll(obj) {
		// console.log(obj);
		this.scrollTop = obj.scrollTop;
	},
	watch: {
		current: function(val) {
			switch (val) {
				case 0:
					this.balance = {
						change_price: 0, //时间段内金额
						price: 0, //余额
						time: '本月',
						balanceList: []
					};
					this.getUserPrice();
					break;
				case 1:
					this.estimate = {
						sum: 0,
						time: '本月',
						estimateList: []
					};
					this.getEstimateComm();
					break;
				case 2:
					this.settlement = {
						sum: 0,
						time: '本月',
						settlementList: []
					};
					this.getSettlement();
					break;
				case 3:
					this.ownestimate = {
						count: 0, //时间段内订单数，
						own_estimate_commission: 0, //预估佣金，
						own_actual_commission: 0 //结算佣金，
					};
					this.orderList = [];
					this.isscreen = false;
					break;
			}
		}
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	onReachBottom() {
		this.loadstatus = 'loading';
		this.page = ++this.page;
		switch (this.current) {
			case 0:
				this.getUserPrice();
				break;
			case 1:
				this.getEstimateComm();
				break;
			case 2:
				this.getSettlement();
				break;
			// case 3:
			// 	this.ownestimate = {
			// 		count: 0, //时间段内订单数，
			// 		own_estimate_commission: 0, //预估佣金，
			// 		own_actual_commission: 0 //结算佣金，
			// 	};
			// 	this.orderList = [];
			// 	this.isscreen = false;
			// 	break;
		}
	},
	//前台进入后台
	onHide() {},
	methods: {
		calendarchange(e) {
			console.log(e);
			this.start = new Date(e.startDate).valueOf() / 1000;
			this.end = new Date(e.endDate).valueOf() / 1000;

			switch (this.current) {
				case 0:
					this.balance = {
						change_price: 0, //时间段内金额
						price: 0, //余额
						time: e.startDate + ' 至 ' + e.endDate,
						balanceList: []
					};
					// this.balance.time = e.startDate + '至' + e.endDate;
					this.getUserPrice();
					break;
				case 1:
					this.estimate = {
						sum: 0,
						time: e.startDate + ' 至 ' + e.endDate,
						estimateList: []
					};
					// this.estimate.time = e.startDate + '至' + e.endDate;
					this.getEstimateComm();
					break;
				case 2:
					this.settlement = {
						sum: 0,
						time: e.startDate + '至' + e.endDate,
						settlementList: []
					};
					// this.settlement.time = e.startDate + '至' + e.endDate;
					this.getSettlement();
					break;
			}
		},
		gotiixan() {
			uni.navigateTo({
				url: '/pages/center/withdraw/withdraw',
				animationType: 'pop-in',
				animationDuration: 300
			});
		},
		docopy(id) {
			uniCopy({
				content: id,
				success: res => {
					uni.showToast({
						title: res,
						icon: 'none'
					});
				},
				error: e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 3000
					});
				}
			});
		},
		opentime(val) {
			if (val === 1) {
				this.isstart = true;
			} else {
				this.isstart = false;
			}
			this.timeshow = true;
		},
		dosuretime(obj) {
			// console.log(obj);
			if (this.isstart) {
				this.startTime = obj.year + '-' + obj.month + '-' + obj.day;
				this.start = new Date(this.startTime).valueOf() / 1000;
				// console.log(this.startTime, this.start);
			} else {
				this.endTime = obj.year + '-' + obj.month + '-' + obj.day;
				this.end = new Date(this.endTime).valueOf() / 1000;
				// console.log(this.endTime, this.end);
			}
		},
		// 用户订单详情
		getOrderDetail() {
			// if(this.start==='' || this.end === ''){
			// 	this.$refs.uToast.show({
			// 		title: '请选择时间!',
			// 		type: 'warning'
			// 	});
			// 	return
			// }
			this.$u.api
				.getOrderDetail({
					start: this.start,
					end: this.end,
					order_id: this.order_id,
					status: this.status
				})
				.then(res => {
					// console.log('详情', res);
					let timestamp = Date.parse(new Date()) / 1000;
					for (let i = 0; i < res.data.data.data.length; i++) {
						if (res.data.data.data[i].payMonth !== '0') {
							res.data.data.data[i].paytime =
								res.data.data.data[i].payMonth.substring(0, 4) +
								'-' +
								res.data.data.data[i].payMonth.substring(4, 6) +
								'-' +
								res.data.data.data[i].payMonth.substring(6, 8);
							// res.data.data.data[i].ispast = new Date(res.data.data.data[i].paytime).valueOf() / 1000 < timestamp ? true : false;
						} else {
							res.data.data.data[i].paytime = '0';
						}
					}
					this.orderList.push(...res.data.data.data);
					this.ownestimate.count = res.data.count;
					this.ownestimate.own_estimate_commission = res.data.own_estimate_commission;
					this.ownestimate.own_actual_commission = res.data.own_actual_commission;
					this.isscreen = true;
					console.log(this.orderList);
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 用户结算记录
		getSettlement() {
			this.$u.api
				.getSettlement({
					start: this.start,
					end: this.end,
					page: this.page,
					pagesize: 20
				})
				.then(res => {
					console.log('结算', res);
					if (res.data.data.data.length === 0) {
						this.loadstatus = 'nomore';
					}
					this.settlement.sum = res.data.sum;
					this.settlement.settlementList.push(...res.data.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 用户预估佣金
		getEstimateComm() {
			this.$u.api
				.getEstimateComm({
					start: this.start,
					end: this.end,
					page: this.page,
					pagesize: 20
				})
				.then(res => {
					console.log('佣金', res);
					if (res.data.data.data.length === 0) {
						this.loadstatus = 'nomore';
					}
					this.estimate.sum = res.data.sum;
					this.estimate.estimateList.push(...res.data.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 用户余额记录
		getUserPrice() {
			this.$u.api
				.getUserPrice({
					start: this.start,
					end: this.end,
					page: this.page,
					pagesize: 20
				})
				.then(res => {
					console.log('余额', res);
					if (res.data.data.data.length === 0) {
						this.loadstatus = 'nomore';
					}
					this.balance.change_price = res.data.change_price;
					this.balance.price = res.data.price;
					this.balance.balanceList.push(...res.data.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		tagClick(index, id) {
			console.log(index, id);
			// this.id = id;
			this.statuslist[index].active = !this.statuslist[index].active;
			for (let i in this.statuslist) {
				if (i == index) {
					this.statuslist[i].active = true;
					// this.title = this.classList[i].name;
					// this.closeDropdown();
				} else {
					this.statuslist[i].active = false;
				}
			}
			this.status = id;
		},
		getFansDetail() {
			this.$u.api
				.getFansDetail({
					page: this.page,
					pagesize: 20,
					search: this.search,
					status: this.current + 1
				})
				.then(res => {
					console.log(res);
					this.fansList.push(...res.data.data);
					this.page = parseInt(res.data.page);
				})
				.catch(err => {
					console.log(err);
				});
		},

		change(index) {
			this.current = index;
			console.log(index, '1111');
			this.page = 1;
			this.start = '';
			this.end = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.myAsset {
	.main {
		.recordlist {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.date {
				margin-bottom: 10rpx;
			}
			.tixian {
				width: 146rpx;
				height: 48rpx;
				border-radius: 12rpx;
				background-color: #f98a7f;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.recordul {
				background-color: #ffffff;
				border-radius: 12rpx;
				.recordli {
					height: 134rpx;
					padding: 28rpx 40rpx 0;
					.right {
						border-bottom: 2rpx solid #f5f5f5;
						padding-bottom: 40rpx;
					}
				}
			}
		}
	}
	.nodata {
		margin-top: 438rpx;
	}
	.detailsbox {
		.details {
			padding: 20rpx 28rpx;
			background-color: #ffffff;
			.title {
				font-size: 24rpx;
				margin-top: 14rpx;
				margin-bottom: 22rpx;
			}
			.statusbox {
				margin-bottom: 32rpx;
				.item {
					// width: 122rpx;
					padding: 0 30rpx;
					height: 56rpx;
					line-height: 56rpx;
					color: #5a5a5a;
					border-radius: 50rpx;
					background-color: #e9e9e9;
					// border: 2rpx solid #ededed;
					// background-color: #ededed;
				}

				.active {
					// border: 2rpx solid #ff0303;
					background-color: #fdc3be;
					color: #f95d4e;
					// background-color: #ffffff;
				}
			}
			.timer {
				margin-bottom: 32rpx;
				.start {
					width: 300rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 24rpx;
					padding: 0 22rpx;
					color: rgba(187, 187, 187, 0.89);
					border: 2rpx solid rgba(187, 187, 187, 0.29);
					border-radius: 40rpx;
				}
			}
			.btns {
				padding: 34rpx 0 0 24rpx;
			}
		}
		.screentop {
			padding: 20rpx 28rpx;
			.time {
				color: #101010;
				font-weight: 600;
				font-size: 26rpx;
				margin-bottom: 10rpx;
			}
			.info {
				color: #5a5a5a;
				font-size: 24rpx;
			}
		}
		.orderul {
			.orderli {
				background-color: #ffffff;
				border-radius: 12rpx;
				margin: 28rpx 22rpx;
				box-shadow: 0px 4rpx 12rpx 0px rgb(217, 217, 217);
				.top {
					padding: 16rpx 14rpx;
					font-size: 24rpx;
					.copy {
						display: inline-block;
						color: rgba(90, 90, 90, 0.79);
						border-radius: 12rpx;
						padding: 10rpx;
						margin-left: 20rpx;
						background-color: rgba(249, 93, 78, 0.2);
					}
				}
				.center {
					padding: 24rpx;
					.rightinfo {
						width: 430rpx;
						font-size: 24rpx;
						.goodsname {
							margin-bottom: 16rpx;
							.jdicon {
								width: 60rpx;
								height: 30rpx;
								line-height: 30rpx;
								background-color: #ff0303;
								text-align: center;
								color: #ffffff;
								border-radius: 6rpx;
							}
						}
						.tuier {
							margin-bottom: 28rpx;
							.leftbox {
								width: 340rpx;
								padding: 0 20rpx;
								color: #919191;
								background-color: rgba(233, 233, 233, 0.49);
							}
						}
						.timeprice {
							margin-bottom: 26rpx;
						}
						.commission {
							margin-top: 16rpx;
						}
					}
				}
			}
		}
	}
}
</style>
